<template>
	<view>
		<image :src="img" mode="widthFix" style="width: 100%;"></image>
		<view class="painter">
			<l-painter :board="board" style="width: 100%;height: 100%;" ref="painterRef" />
		</view>
	</view>
</template>

<script>
	import {
		ossUpload,
		ossDel
	} from '@/common/oss.js'
	export default {
		data(){
			return {
				board: {},
				img: ''
			}
		},
		mounted() {
			this.show()
			this.$nextTick(()=>{
				console.log('this.$refs.painterRef', this.$refs.painterRef, this.board)
				this.$refs.painterRef.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    // H5 提示用户长按图另存
				    this.img = res.tempFilePath
					ossUpload(res.tempFilePath, false).then(res=>{
						console.log('ossUpload', res)
						
						
					})
				  },
				  fail: (err)=>{
					  console.log('err',err)
					 
				  }
				});
			})
		},
		methods:{
			show(){
				let u1 = this.ossUrl + '/static/image/certificate/test1.jpg'
				let u2 = this.ossUrl + '/static/image/certificate/gz.png'
				this.board = {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '1131rpx',
						height: '1600rpx',
						position: "relative",
					},
					views: [
						//底图
						{
							type: 'image',
							src: u1,
							css: {
								width: '100%',
								height: '100%',
								borderRadius: "20rpx",
							}
						},
						{
								css: {
									background: "#ff9d00",
									height: "120rpx",
									width: "120rpx",
									borderRadius: "50%",
									display: "inline-block",
									top: "100rpx",
									left: "105rpx",
									position: "absolute",
									zIndex: "11",
								},
								views: [],
								type: "view"
							},
						//编号
						{
							type: "text",
							css: {
								width: "198rpx",
								height: "47rpx",
								top: "570rpx",
								left: "505rpx",
								position: "absolute",
								zIndex: "9",
								//background: 'rgba(0,0,0,0.5)',
								textAlign: 'left',
								fontSize: '32rpx',
								color: '#af0505',
								borderRadius: "50%",
								display: "inline-block",
							},	
							text: '25623435'
						},
						//姓名
						{
							type: "text",
							css: {
								width: "210rpx",
								height: "45rpx",
								top: "680rpx",
								left: "345rpx",
								position: "absolute",
								zIndex: "9",
								background: '#ff9d00',
								textAlign: 'left',
								fontSize: '30rpx',
								color: '#000',
								fontWeight: '500',
								borderRadius: "20rpx",
							},	
							text: '张某某1'
						},
						//授权时间
						{
							type: "text",
							css: {
								width: "320rpx",
								height: "38rpx",
								bottom: "240rpx",
								left: "643rpx",
								position: "absolute",
								zIndex: "9",
								//background: 'rgba(0,0,0,0.5)',
								textAlign: 'left',
								fontSize: '28rpx',
								color: '#000'
							},	
							text: '2025年12月15日'
						},
						//公章
						{
							type: 'image',
							src: u2,
							css: {
								width: "260rpx",
								height: "260rpx",
								bottom: "165rpx",
								left: "650rpx",
								position: "absolute",
								zIndex: "10",
							}
						},
					]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.painter {
		width: 1280rpx;
		height: 1810rpx;
		position: fixed;
		left: -200%;
	}
</style>